<template>
	<!-- 顶部 -->
	<div class="home-fine">
		<nav-bar
			style="height: 3.125rem; padding-top: 0.9375rem"
			title="热门课程"
			left-text=""
			fixed="true"
			left-arrow
			@click-left="onClickLeft"
		>
		</nav-bar>
		<!-- 内容区域 -->
		<div class="fine">
			<!-- 顶部标签 -->
			<tabs
				v-model:active="active"
				type="card"
				swipeable
				animated
				duration=".4"
				sticky="true"
				offset-top="4.0625rem"
				@change="changeHandle"
			>
				<!-- :to="{ name: 'Home-Fine', query: { tid: i.id } }" -->

				<!-- 顶部标签的名字 -->
				<!-- 绑定name属性上方change调用(默认回调name参数) -->
				<tab v-for="i in tc" :title="i.name" :key="i.id" :name="i.id">
					<!-- 内容区域 选项卡内容 -->
					<div class="fineImg" @click="clickHandle(i.id)">
						<img :src="dalImg(i.picture)" alt="图片" />
						<div class="left">{{ i.name }}</div>
						<div class="left">
							<span>{{ i.createTime }}</span>
							<!-- <span>课程:1个</span>&nbsp;<span>课时:70集</span>&nbsp;
						<span>习题:953</span> -->
						</div>
						<div class="right">{{ i.price + 49 }}</div>
						<div class="rightNew">{{ i.price }}</div>
						<div class="shopping">1265人已购</div>
					</div>
				</tab>
			</tabs>
		</div>
	</div>
</template>
<script setup>
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { ref } from "vue";
import { NavBar, Tab, Tabs } from "vant";
import { dalImg } from "../Utils/tools";
// 引入接口
import { localComboAPI } from "../API/jiang";
//获取套餐里视频列表与总课程数视频数
const tc = ref([]);
const tc2 = ref([]);
const tc3 = ref([]);
localComboAPI().then((res) => {
	tc.value = res.data;
	console.log(tc.value);
});

//下面的全是作废区
//change跳转并传tid
const changeHandle = (name) => {
	router.push({ name: "Home-Fine", query: { tid: name } });
};
const route = useRoute;
//路由切换的时候被复用的时候使用
// select用来存储id
// const select = ref(0);
// // dom元素更新之前router接收传的query参数
// onBeforeRouteUpdate((route, from) => {
// 	select.value = tc.value.findIndex((item) => {
// 		item.id == route.query.tid;
// 	});
// 	// 被复用的时候根据路由tid渲染数据
// 	localComboAPI(route.query.tid).then((res) => {
// 		// 这里减一是因为这个组件会莫名其妙的从索引一开始算起，所以进行一个减一操作来达到可以出现第一页的内容
// 		tc2.value = res.data[route.query.tid - 1].children;
// 		tc3.value = res.data[route.query.tid - 1].children.id;
// 	});
// });

const clickHandle = (id) => {
	router.push({
		name: "Home-MoveLessonTo",
		query: {
			id,
		},
	});
};
//作废区结束

// 设置最上方返回栏返回到home页面
const router = useRouter();
const onClickLeft = () => {
	router.push({ name: "Home" });
};
</script>
<style>
.home-fine .shopping {
	background-color: red;
	width: 4.6875rem;
	text-align: center;
	font-size: 0.75rem;
	color: #fff;
	position: absolute;
	right: 0rem;
	bottom: 4.375rem;
}
.home-fine .rightNew {
	position: absolute;
	right: 0.8125rem;
	bottom: 1.5625rem;
	color: orange;
}
.home-fine .right {
	position: absolute;
	right: 0.6875rem;
	bottom: 0.625rem;
	font-size: 0.8125rem;
	color: gray;
	text-decoration: line-through;
}
.home-fine .fineImg {
	width: 90%;
	height: 14.375rem;
	margin: 1.0625rem auto;
	box-shadow: 0 0 0.25rem gray;
	position: relative;
}
.home-fine .fineImg img {
	width: 97%;
	max-height: 70%;
	display: block;
	margin: auto;
}
.home-fine .left {
	margin: 0.4375rem;
}
.home-fine .fineImg span {
	font-size: 0.75rem;
}
.home-fine .fine {
	margin-top: 4.0625rem;
	background-color: #fff;
}
.home-fine .fine .van-tab--card.van-tab--active {
	border-radius: 1.875rem;
	font-size: 0.8125rem;
}

.home-fine .fine .van-tabs__nav--card {
	border: none;
	height: 1.6875rem;
}
.home-fine .fine .van-tab--card {
	border: none;
}
</style>
